<template>
<div>
  <el-container style="height: 100vh; border: 1px solid rgba(229,232,232,0.49)">
    <el-aside width="200px" style="background-color: rgb(125,198,243)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-s-home"></i>房源信息</template>
          <el-menu-item-group>
            <el-menu-item index="1-1" style="color: #409EFF;">房屋信息</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>个人</template>
          <el-menu-item-group>
            <router-link to="/tenant_lease" style="color: black"><el-menu-item index="2-1">我的租赁</el-menu-item></router-link>
            <router-link to="/tenant_repaire" style="color: black"><el-menu-item index="2-2">报修</el-menu-item></router-link>
            <router-link to="/tenant_personaliInfo" style="color: black"><el-menu-item index="2-3">修改个人信息</el-menu-item></router-link>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container >
      <el-header style="text-align: right; font-size: 12px; background-color: rgba(171,248,248,0.49)">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/" style="color: black"><el-dropdown-item>退出</el-dropdown-item></router-link>
            <el-dropdown-item>
              <el-button type="text" @click="outerVisible = true" style="color: black">个人信息</el-button>
              <el-dialog
                title="提示"
                :visible.sync="outerVisible"
                width="30%"
                append-to-body>

                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="账号" style="margin-right: 50px">
                    <el-input :value="form.tphone"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" style="margin-right: 50px">
                    <el-input :value="form.tename"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio disabled v-model="form.sex"  label="男">男</el-radio>
                    <el-radio disabled v-model="form.sex" label="女">女</el-radio>
                  </el-form-item>
                  <el-form-item label="年龄" style="margin-right: 50px">
                    <el-input :value="form.age"></el-input>
                  </el-form-item>
                  <el-form-item label="目前居住地" style="margin-right: 50px">
                    <el-input :value="form.liveaddress"></el-input>
                  </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="outerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="outerVisible = false">确 定</el-button>
                  </span>
              </el-dialog>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span v-text="name"></span>
      </el-header>

      <el-main >
        <el-row style="text-align: center" v-cloak>
          <el-col :span="8" v-for="(data,index) in tableData" :key="data">
            <el-card :body-style="{textAlign:'center'}" style="width: 300px;height: 400px">
              <img :src="getImg(index)" style="width: 100%;height: 100%" class="image">
              <div style="padding: 14px; background-color: aliceblue">
                <span v-text="data.address"></span>
                <div>
                  <span v-if="data.type==1">单人间</span>
                  <span v-else-if="data.type==2">双人间</span>
                </div>
                <div>
                  <span v-if="data.state==10" style="color:#939090;">维修中</span>
                  <span v-else-if="data.state==0">可租借</span>
                  <span v-else-if="data.state==1" style="color: red">已借</span>
                </div>
                <span v-text="'联系电话：'+data.hphone"></span>
                <div class="bottom clearfix" style="margin-top: 30px">
                  <el-button type="primary" class="button" v-if="data.state==0" @click="outerVisible2=true,buttonindex=index,getDate(data.hphone)">租房</el-button>
                  <el-dialog
                    title="租房请求"
                    :visible.sync="outerVisible2"
                    width="30%"
                    append-to-body>
                    <span v-text="timerange"></span><br>
                    <el-date-picker
                      v-model="valuedate"
                      type="date"
                      placeholder="日期选择"
                      @change="judge"
                     >
                    </el-date-picker>
                    <span v-if="flag" style="color: red">时间无效</span>
                    <br><br>
                    <div>地点选择</div>
                    <el-select v-model="meetingaddress" placeholder="请选择会面地点">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="outerVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="outerVisible2 = false,value=new Date(),initRe(buttonindex)">确 定</el-button>
                  </span>
                  </el-dialog>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>

</div>
</template>

<script>

export default {
  name: "tanant_main",
  data() {
    return {
      tableData: [
        {
          img: ''
        }
      ],
      name: sessionStorage.getItem("name"),
      form: {},
      outerVisible: false,
      outerVisible2: false,
      valuedate: new Date(),
      flag: true,
      value2: new Date(2021, 11, 0),
      rentquest: {
        tphone: sessionStorage.getItem("id"),
        houseid: 0,
        hphone: 0,
        meetime: new Date(),
        address: 0,
        date: new Date(),
        houseaddress: ''
      },
      limitdate: [],
      timerange: '',
      meetingaddress: '',
      options: [{
        value: 1,
        label: '咖啡馆'
      }, {
        value: 2,
        label: '餐厅'
      }, {
        value: 3,
        label: '酒店'
      }, {
          value: 4,
          label: '公园'
        },
        {
          value: 5,
          label: '图书馆会议室'
        }
      ],
      buttonindex: 0
    }
  },
  created() {
    this.getinfo()
    this.getPersonalInfo()
  },
  methods: {
    getinfo() {
      this.$axios({
        url: '/tenant/getAllHouse'
      })
        .then(successResponse => {
          this.tableData = successResponse.data
        })
        .catch(failResponse => {
        })
    },
    getImg(index) {
      this.tableData.img = require('../img/' + index + '.jpg')
      return this.tableData.img
    },
    getPersonalInfo() {
      console.log(sessionStorage.getItem("id"))
      this.$axios({
        url: '/tenant/getPersonalInfo',
        params: {
          id: sessionStorage.getItem("id")
        }
      })
        .then(successResponse => {
          this.form = successResponse.data
        })
    },
    initRe(index) {
        this.rentquest.houseid = this.tableData[index].houseid
        this.rentquest.hphone = this.tableData[index].hphone
        this.rentquest.meetime = this.valuedate
        this.rentquest.address = this.meetingaddress
        this.$axios({
          url: '/tenant/remeeting',
          params:{
            meeting: this.rentquest
          }
        }).then(successResponse=>{
          this.rentquest={}
          if (successResponse.data === "exit"){
            this.open2()

          }else{
            this.open()
            setTimeout(()=>{
              this.$router.go(0)
            },1000)
          }
      })
    },
    getDate(hphone) {
      this.$axios({
        url: '/tenant/getDate',
        params:{
          date: hphone
        }
      }).then(successResponse => {
        this.limitdate = successResponse.data;
        this.timerange = "时间选择："+this.limitdate[0]+"--"+this.limitdate[1]
      })
    },
    judge(){
      var date1 = this.limitdate[0].slice(0,10)
      var arr1 = date1.split("-")
      var date2 = this.limitdate[1].slice(0,10)
      var arr2 = date2.split("-")
      var newdate1 = new Date(arr1[0],arr1[1]-1,arr1[2])
      var newdate2 = new Date(arr2[0],arr2[1]-1,arr2[2])
      if (this.valuedate.getTime()<newdate1.getTime() || this.valuedate.getTime()>newdate2.getTime()){
        this.flag = true
      }else {
        this.flag = false
      }
    },
    open() {
        this.$notify({
          title: '成功',
          message: '申请成功',
          type: 'success'
        });
    },
    open2() {
      this.$notify.error({
        title: '错误',
        message: '不能重复申请'
      });
    }
  }
}
</script>

<style scoped>

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

router-link {
  text-decoration: none;
  color: black;
}
a{
  text-decoration: none;
}
[v-cloak] {
  display: none;
}
</style>
